{% load static i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!--公共CSS-->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <link href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/nprogress.css' %}" rel="stylesheet">
    <link href="{% static 'css/daterangepicker.css' %}" rel="stylesheet">
    <link href="{% static 'css/custom.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/green.css' %}" rel="stylesheet">
    <link href="{% static 'css/sweetalert/sweetalert.css' %}" rel="stylesheet">
    <link href="{% static 'css/mystyle-table.css' %}" rel="stylesheet">
    <!-- <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon"> -->
    <style type="text/css">
        #search {
            position: relative;
            width: 15%;
            z-index: 1;

        }
    </style>
</head>

<body>
<div class="container body">

    <div class="right_col" role="main">

        <div id="search">
            <select id="level1" class="form-control col-md-3 col-lg-4" onchange="changeselect()">
                <option value="--请选择市--">--请选择市--</option>
                <option value="株洲市">株洲市</option>
                <option value="郴州市">郴州市</option>

            </select>
            <select id="level2" onchange="selectpost()" class="form-control col-md-3 col-lg-4">
                <option value="--请选择问卷类型--">--请选择问卷类型--</option>
                <option value="入户筛查表">入户筛查表</option>
            </select>
        </div>
        <div class="clearfix"></div>

        <div id="mytable" style="width: 85%;height:600px;"></div>
        <label id="inputvalue" style="display: block;" value="test"></label>


    </div>
</div>
<!--公共JS-->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/custom.min.js' %}"></script>
<script src="http://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>
<script src="{% static 'js/sweetalert/sweetalert.min.js' %}"></script>
<script src="/static/js/echarts.js"></script>
<!--单独页面定制js-->
<script>
    var myChart = echarts.init(document.getElementById('mytable'));//echarts图表显示位置

    //二级下拉框事件触发
    function selectpost() {

        var city = $('#level1 option:selected').val();//获取被选择的城市
        var questionnaire = $('#level2 option:selected').val();//获取问卷类型
        if (questionnaire != '--请选择问卷类型--' && city != '--请选择市--') {
            document.getElementById("inputvalue").value = city + questionnaire;
            ajaxpost();
        }
    }

    function ajaxpost() {
        // 显示标题，图例和空的坐标轴

        var city = $('#level1 option:selected').val();//获取被选择的城市
        var questionnaire = $('#level2 option:selected').val();//获取问卷类型

        $.ajax({
            type: "POST",
            data: {'city': city, 'questionnaire': questionnaire},
            url: "{% url 'nzzNum_check' %}", //后台处理函数的url
            cache: false,
            success: function (data) {

                data = JSON.parse(data);
                var myoption = {
                    title: {
                        text: city + "各区" + questionnaire + "统计情况",
                        x: 'center',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['待提交', '待审核', '审核通过'], // 颜色说明
                        x: 'right',
                    },
                    xAxis: {
                        data: data["region"],
                    },
                    yAxis: {},
                    toolbox: {
                        saveAsImage: {show: true}
                    },
                    series: [{
                        name: '待提交', // 柱状图名字，位于柱状图的正上方。
                        type: 'bar', // 柱状图。
                        data: data["y1"],
                        label: {
                            normal: {
                                show: true,
                                // 数据在柱子头部显示
                                position: 'top',
                                textStyle: {
                                    // color: '#5475c7',
                                    fontSize: 16,
                                }
                            }
                        },

                    },

                        {
                            name: '待审核', // 柱状图名字，位于柱状图的正上方。
                            type: 'bar', // 柱状图。
                            data: data["y2"],
                            label: {
                                normal: {
                                    show: true,
                                    // 数据在柱子头部显示
                                    position: 'top',
                                    textStyle: {
                                        // color: '#5475c7',
                                        fontSize: 13,
                                    }
                                }
                            },

                        },

                        {
                            name: '审核通过', // 柱状图名字，位于柱状图的正上方。
                            type: 'bar', // 柱状图。
                            data: data["y3"],
                            label: {
                                normal: {
                                    show: true,
                                    // 数据在柱子头部显示
                                    position: 'top',
                                    textStyle: {
                                        // color: '#5475c7',
                                        fontSize: 16,
                                    }
                                }
                            },

                        },
                    ]
                };

                myChart.setOption(myoption);
                myChart.on('click', function (params) {
                    $.ajax({
                        type: "POST",
                        data: {'region': params.name},                //传入区域
                        url: "{% url 'get_region_questionnaires' %}", //后台处理函数的url
                        cache: false,
                        success: function (data) {
                            data = JSON.parse(data)
                            echarts.init(document.getElementById('mytable')).dispose();
                            var myChart = echarts.init(document.getElementById('mytable'));//echarts图表显示位置

                            var option = {
                                title: {
                                    text: params.name + "所有问卷统计情况",
                                    x: 'center',
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                legend: {
                                    data: ['待提交', '待审核', '审核通过'], // 颜色说明
                                    x: 'right',
                                },
                                xAxis: {
                                    data: data["questionnaires"]
                                },
                                yAxis: {},
                                toolbox: {
                                    saveAsImage: {show: true}
                                },
                                series: [{
                                    name: '待提交', // 柱状图名字，位于柱状图的正上方。
                                    type: 'bar', // 柱状图。
                                    data: data["y1"],
                                    label: {
                                        normal: {
                                            show: true,
                                            // 数据在柱子头部显示
                                            position: 'top',
                                            textStyle: {
                                                // color: '#5475c7',
                                                fontSize: 16,
                                            }
                                        }
                                    },

                                },

                                    {
                                        name: '待审核', // 柱状图名字，位于柱状图的正上方。
                                        type: 'bar', // 柱状图。
                                        data: data["y2"],
                                        label: {
                                            normal: {
                                                show: true,
                                                // 数据在柱子头部显示
                                                position: 'top',
                                                textStyle: {
                                                    // color: '#5475c7',
                                                    fontSize: 13,
                                                }
                                            }
                                        },

                                    },

                                    {
                                        name: '审核通过', // 柱状图名字，位于柱状图的正上方。
                                        type: 'bar', // 柱状图。
                                        data: data["y3"],
                                        label: {
                                            normal: {
                                                show: true,
                                                // 数据在柱子头部显示
                                                position: 'top',
                                                textStyle: {
                                                    // color: '#5475c7',
                                                    fontSize: 16,
                                                }
                                            }
                                        },

                                    },
                                ]
                            };
                            myChart.setOption(option);
                        },
                        error: function (errorMsg) {
                            //请求失败时执行该函数
                            alert("图表请求数据失败!");
                            myChart.hideLoading();
                        }
                    })
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }

        });

    }
</script>
</body>
</html>